<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本格式改变案例</title>
  <style type="text/css">
    .one{
      width: 300px;color: red;
      border: 10px solid #333333;
      background:yellow;
    }
    .two{
       width: 500px;color: yellow;
      border: 20px solid #444444;
      background:red;
    }
  </style>
</head>
<body>
  <input id="but1" type="button" value="-">
  <input id="but2" type="button" value="+">
  <input id="but3" type="button" value="样式一">
  <input id="but4" type="button" value="样式二">
  <p id="p1">噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。

  问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！

  剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！</p>
  
  <script type="text/javascript">
    var but1 = document.getElementById('but1');
    var but2 = document.getElementById('but2');
    var but3 = document.getElementById('but3');
    var but4 = document.getElementById('but4');
    var p1 = document.getElementById('p1');
    var num = 15;
    but1.onclick = function (){
      num--;
      p1.style.fontSize = num + "px";
    }
    but2.onclick = function (){
      num++;
      p1.style.fontSize = num + "px";
    }
    but3.onclick = function (){
      p1.className = "one";
    }
    but4.onclick = function (){
      p1.className = "two";
    }
  </script>

</body>
</html>